import Taro, { Component } from "@tarojs/taro";
import { View, Button, Text, Image } from "@tarojs/components";
import { AtModal, AtInput,AtButton } from 'taro-ui'
import "./addCustomerModal.less";

class AddCustomerModal extends Component {

  state = {
    name: "",
    tel: ""
  };

  submitCustomer() {
    const { tel, name } = this.state;
    this.props.addCustomer({tel, name})
  }

  render() {
    return (
      <AtModal
        isOpened={this.props.opened}
        title="添加客户"
        content={
          <View className="add-customer-model">
            <AtInput
              name="name"
              title="姓名"
              type="text"
              placeholder="请输入客户姓名"
              value={this.state.name}
              onBlur={() => {
                setTimeout(window.scrollTo(0, 0), 200);
              }}
              onChange={(value) => {
                this.setState({
                  name:value
                })
              }}
            />
            <AtInput
              name="tel"
              title="手机号"
              type="text"
              placeholder="请输入客户手机号"
              value={this.state.tel}
              onBlur={() => {
                setTimeout(window.scrollTo(0, 0), 200);
              }}
              onChange={(value) => {
                this.setState({
                  tel:value
                })
              }}
            />
            <AtButton
              onClick={this.submitCustomer.bind(this)}
              className="add-customer-btn"
              type="primary"
            >
              提交
            </AtButton>
            <Text className="add-customer-info">
              添加有效客户的姓名手机号提交给商家，商家将在客户成单后把佣金达到您的账户中
            </Text>
          </View>
        }
      />
    );
  }
}
export default AddCustomerModal;
